<template>
	<view class="content">
		<view class="goods_list">
			<view class="goods" v-for="(item ,index) in orderList" @click="nav(item)"  v-if="item.show">
				<span class="silk-ribbon1"><span>{{status[item.order.status-1]}}</span></span>



				<view class="" v-for="(items ,indexs) in item.activ_list" :style="{marginBottom: '30upx',filter:(items.activ_day*1000-date)<0?'grayscale(70%)':'grayscale(0%)'}">
					<!-- 		<u-count-down :time="items.activ_day*1000-date" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
						<view class="time">
							<u-icon name="clock-fill" color="#AC7D3D"></u-icon>
							<text style="margin-left: 10upx;">距离到期还有：</text>
							<text class="time__item">{{ timeData.days }}&nbsp;天</text>
							<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
							<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
							<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
						</view>
					</u-count-down> -->
					<view  class="time"  :style="{marginBottom: '10rpx',opacity: item.order.status!=1?1:0}">
						<u-icon name="clock-fill" color="#AC7D3D"></u-icon>
						<text v-if="(items.activ_day*1000-date)<0" style="margin-left: 15rpx;">已过期</text>
						<block v-else>
							<text style="margin-left: 10upx;">距离到期还有：</text>			
					  	<u-count-down :time="items.activ_day*1000-date" format="DD天HH时mm分ss秒"></u-count-down>
						</block>
						
					</view>

					<view class="" style="display: flex;margin-bottom: 20upx;">
						<view class="image" style="position: relative;">
							<!-- <view class="wrap"><span class="silk-ribbon6">丝带效果6</span></view> -->
							<image :src="items.pic" mode=""></image>
						</view>
						
						<view class="goods_text">
							<view class="title">
								{{items.title}} <text v-if="items.activ_da">{{items.activ_day*1000-date}}</text>
							</view>
							<view class="type">
								<!-- <text>超级过山车教程</text> -->
							</view>
							<view class="num">
								<text
									v-if="item.order.status==1">￥{{item.member_zt==2?items.price_s:items.price_a}}</text>
								<text v-else>￥{{items.activ_price}}</text>
								<text class="statistics_num"> <text>X</text>{{items.num}}</text>
							</view>
						</view>
					</view>
					<view class="prop_list" v-if="items.props_list.num">
						<u-icon name="arrow-right"></u-icon>
						<view class="">
							<text>￥{{items.props_list.price}}</text> <text class="statistics_num">
								<text>X</text>{{items.props_list.num}}</text>
						</view>
						<view style="">道具购买 | {{items.props_list.title}}</view>
					</view>
					<view class="prop_list" v-if="items.rent_list.num">
						<u-icon name="arrow-right"></u-icon>
						<view class="">
							<text>￥{{items.rent_list.price_s}}/天</text>(押金：{{items.rent_list.price}}) <text
								class="statistics_num"> <text>X</text>{{items.rent_list.num}}</text>
						</view>
						<view style="">道具租赁 | {{items.rent_list.title}}</view>
					</view>
				</view>

				<view class="prop_list" v-for="(itemx ,Xindex) in item.props_list" :key="Xindex">
					<u-icon name="arrow-right"></u-icon>
					<view class="">
						<text>￥{{itemx.price_s}}/天</text>(押金：{{itemx.price}}) <text class="statistics_num">
							<text>X</text>{{itemx.num}}</text>
					</view>
					<view style="">综合道具 | {{itemx.title}}</view>
				</view>

				<block v-if="item.order.status!==1">
					<view class="money_">
						原价：<text>￥{{item.order.price_s}}</text>
					</view>
					<view class="money_">
						优惠券：<text>￥{{item.order.coupons_price}}</text>
					</view>
					<view class="money_">
						会员优惠：<text>￥{{item.order.member_price}}</text>
					</view>
					<view class="money">
						实付款：<text>￥{{item.order.price_pay}}</text>
					</view>
				</block>

				<view class="orderNumber">
					<text>订单号：</text>
					<text>{{item.order.order_id}}</text>
				</view>
				<view class="orderNumber" style="margin-bottom: 10rpx;" v-if="item.order.status!==1">
					<text>付款时间：</text>
					<text>{{item.order.time_a}}</text>
				</view>

				<view class="deduction">
					<text v-if="item.order.status==1" @click.stop="goPay(item)">去支付</text>
	<!-- 				<text
						v-if="item.order.status==5&&item.order.price_refunds==0&&item.order.type.indexOf('2')!=-1">退押金</text>
					<text v-if="item.order.status===4">退押金中</text> -->
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: ['待付款', '已支付', '已发货', '退押金', '已完成', '已退款'],
				timeData: {},
				page: 1,
				orderList: [],
				date: Date.now()
			}
		},
		onShow() {
			this.upData()
		},
		methods: {
			upData() {
				this.$myRuquest('home/user/order_list', {
					page: this.page,
					num: 10
				}).then(res => {
					res.data.forEach(item=>{
						item.show=item.order.type.indexOf('1')!==-1||item.order.type.indexOf('2')!==-1
					})
					this.orderList = res.data
				})
			},
			goPay(data) {
				uni.navigateTo({
					url: `/pages/createOrder/createOrder?data=${JSON.stringify(data)}`
				})
			},
			nav(item) {
				console.log('测试',item)
				// if (item.order.status != 1) return;
				let url = `/pages/createOrder/createOrder?data=${JSON.stringify(item)}`
				if(item.order.status!=1){
					url=`/pages/me/myOrderList/orderDetails?data=${JSON.stringify(item)}`
				}
				uni.navigateTo({
					url
				})
			},
	
			onChange(e) {
				console.log(e)
				this.timeData = e
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #FAFAFA;
		padding: 20upx;
		min-height: 100vh;
	}

	.time,.u-count-down__text.data-v-c83f265c {
		font-size: 24upx !important;
		color: #AC7D3D !important;
		display: flex;
		align-items: center;
		// margin-bottom: 20upx;
	}

	.money {
		text-align: right;
		font-size: 24upx;
		font-weight: 700;
		margin-top: 20upx;
		padding-bottom: 20upx;

		text {
			font-size: 32upx;
			color: #FF0000;
		}
	}

	.money_ {
		text-align: right;
		font-size: 24upx;
		// font-weight: 700;
		margin-top: 20upx;


		text {
			color: #999999;
		}
	}

	.deduction {
		display: flex;
		flex-direction: row-reverse;

		text {
			background-color: #FED194;
			color: #AC7D3D;
			width: 250upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border-radius: 40upx;
			margin-top: 40upx;
		}
	}

	.orderNumber {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		font-weight: 700;
		color: #333333;
		margin-top: 20upx;
		padding-top: 20upx;
		border-top: 2upx solid #DEDEDE;
	}

	.goods_list {

		margin-top: 20upx;



		.goods {
			position: relative;
			border-radius: 16upx;
			padding: 60upx 40upx 20upx 40upx;
			background-color: #FFFFFF;
			margin-bottom: 30upx;
      .image{
				width: 160upx;
				height: 160upx;
				
				margin-right: 30upx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
			}
			

			.goods_text {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				.title {
					font-size: 28upx;
					color: #333333;
					font-weight: 700;
				}

				.type {
					text {
						background-color: #F6F6F6;
						color: #999999;
						padding: 10upx 20upx;
						font-size: 24rpx;
						border-radius: 25upx;
					}
				}

				.num {
					display: flex;
					justify-content: space-between;
					color: #333333;

					text:nth-child(2) {
						font-size: 24upx;
					}
				}
			}
		}
	}

	.prop_list {
		// padding-left: 160upx;
		font-size: 24upx;
		color: #333333;
		display: flex;
		flex-direction: row-reverse;
		margin-top: 20upx;

		>view {
			// flex: 1;
			margin: 0 20upx;

			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			.statistics_num {
				margin-left: 20upx;

				text {
					font-size: 20upx;
				}
			}
		}

		>view:nth-child(2) {
			display: flex;
			justify-content: space-between;
			margin-left: 10upx;
		}
	}

	.silk-ribbon1 {
		color: #AC7D3D;
		position: absolute;
		top: -5upx;
		right: 30upx;
	}

	.silk-ribbon1:after {
		position: absolute;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-left: 53upx solid transparent;
		border-right: 53upx solid transparent;
		border-top: 10upx solid #F4D6AA;
	}

	.silk-ribbon1 span {
		position: relative;
		display: inline-block;
		text-align: center;
		background: #F4D6AA;
		font-size: 24upx;
		line-height: 2em;
		padding: 12upx 8upx 10upx;
		border-top-right-radius: 8upx;
		width: 90upx;
	}

	.silk-ribbon1 span:before,
	.silk-ribbon1 span:after {
		position: absolute;
		content: "";
		display: block;
	}

	.silk-ribbon1 span:before {
		background: #F4D6AA;
		height: 6upx;
		width: 6upx;
		left: -6upx;
		top: 0;
	}

	.silk-ribbon1 span:after {
		background: #AC7D3D;
		height: 6upx;
		width: 8upx;
		border-radius: 8upx 8upx 0 0;
		left: -8upx;
		top: 0;
	}
	
	
	
	
	
	// .wrap {
	// 	width: 100%;
	// 	height: 188upx;
	// 	position: absolute;
	// 	top: -8upx;
	// 	left: 8upx;
	// 	overflow: hidden;
	// }
	
	// .wrap:before {
	// 	content: "";
	// 	display: block;
	// 	border-radius: 8upx 8upx 0upx 0upx;
	// 	width: 40upx;
	// 	height: 8upx;
	// 	position: absolute;
	// 	right: 100upx;
	// 	background: #4D6530;
	// }
	
	// .wrap:after {
	// 	content: "";
	// 	display: block;
	// 	border-radius: 0upx 8upx 8upx 0upx;
	// 	width: 8upx;
	// 	height: 40upx;
	// 	position: absolute;
	// 	right: 0upx;
	// 	top: 100upx;
	// 	background: #4D6530;
	// }
	
	// .silk-ribbon6 {
	// 	display: inline-block;
	// 	text-align: center;
	// 	width: 200upx;
	// 	height: 40upx;
	// 	line-height: 40upx;
	// 	position: absolute;
	// 	top: 30upx;
	// 	right: -50upx;
	// 	z-index: 2;
	// 	overflow: hidden;
	// 	transform: rotate(-45deg);
	// 	// -ms-transform: rotate(45deg);
	// 	// -moz-transform: rotate(45deg);
	// 	// -webkit-transform: rotate(45deg);
	// 	// -o-transform: rotate(45deg);
	// 	border: 1upx dashed;
	// 	box-shadow: 0 0 0 3upx #57DD43, 0upx 21upx 5upx -18upx rgba(0, 0, 0, 0.6);
	// 	background: #57DD43;
	// }
	
	
</style>
